<script setup lang="ts">
import { ref, onMounted } from "vue";
import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
import SunnyIcon from "~icons/ep/sunny";
import MoonIcon from "~icons/ep/moon";

import dayIcon from "@/assets/svg/day.svg?component";
import darkIcon from "@/assets/svg/dark.svg?component";

defineOptions({
  name: "ThemeChange"
});

const props = defineProps({
  // 是否仅显示一个icon图标
  useIcon: {
    type: Boolean,
    default: false
  }
});

// 暗黑模式
const isDarkMode = ref();

const { dataTheme, overallStyle, dataThemeChange } = useDataThemeChange();

// 主题切换
function handleThemeIconClick() {
  isDarkMode.value = !isDarkMode.value;
  setTimeout(() => {
    dataTheme.value = isDarkMode.value;
    dataThemeChange(isDarkMode.value ? "dark" : "light");
  }, 0);
}

onMounted(() => {
  // 初始化暗黑模式
  isDarkMode.value = dataTheme.value;
  dataThemeChange(overallStyle.value);
});
</script>

<template>
  <el-tooltip
    effect="dark"
    content="切换主题"
    placement="bottom"
    :hide-after="0"
  >
    <el-switch
      v-if="!props.useIcon"
      v-model="dataTheme"
      inline-prompt
      :active-icon="dayIcon"
      :inactive-icon="darkIcon"
      @change="dataThemeChange"
    />
    <div
      v-else
      class="fullscreen-icon navbar-bg-hover"
      @click="handleThemeIconClick"
    >
      <IconifyIconOffline :icon="isDarkMode ? SunnyIcon : MoonIcon" />
    </div>
  </el-tooltip>
</template>

<style lang="scss" scoped>
//
</style>
